<template>
  <div>
    <div>
      <el-row>
        <el-col :span="18" :offset="3">
          <div style="margin-top: 50px;text-align: right">
            <span class="demonstration"></span>
            <el-date-picker
              v-model="year"
              type="year"
              placeholder="选择年">
            </el-date-picker>
            <div style="display: inline-block;margin-left: 10px">
              <el-button type="primary" @click="submit()">搜索</el-button>
            </div>
          </div>
        </el-col>
      </el-row>

    </div>
    <div>
      <el-row style="margin-top: 15px">
        <el-col :span="20" :offset="2">
          <div class="grid-content bg-purple-dark">
            <template>
              <el-table
                :data="tableData"
                height="350"
                border
                style="width: 100%">
                <el-table-column
                  prop="m_time"
                  label="工资日期"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="salary"
                  label="基本工资"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="overwork"
                  label="加班工资"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="absent"
                  label="旷工扣钱"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="leave"
                  label="请假扣钱"
                  width="150">
                </el-table-column>
                 <el-table-column
                  prop="last_salary"
                  label="实发工资"
                 >
                </el-table-column>
              </el-table>
            </template>
          </div>

        </el-col>
      </el-row>
    </div>
      <div class="pagenation" style="text-align: center">
          <el-pagination
            small
            layout="prev, pager, next"
            :total="total"
            :page-size="page_size"
            @prev-click="prevfun"
            @next-click="nextfun"
            @current-change="currentchange"
          >
          </el-pagination>
        </div>

  </div>
</template>

<script>
  export default {
    name: 'StaffSalaryView',
    data () {
      return {
         total: 1, //所有数据个数
        page_size: 1,//每页数量,
        year: '',
        tableData: []
      }
    },
    mounted () {
      this.first_data()
    },
    methods:{
      first_data(){
        this.$axios({
          url:this.$settings.base_url+'/user/staffsalary/',
          method:'get'
        }).then(res=>{
          this.tableData=res.data.data
          console.log(this.tableData)
        })
      },
      submit(page=1){
        this.$axios({
           url:this.$settings.base_url+`/user/staffsalary/?page=${page}`,
          method:'post',
          data:{'year':this.year}
        }).then(res=>{
           this.tableData = res.data.results
          this.page_size = res.data.page_size
          this.total = res.data.count
          console.log(this.tableData)
        })

      },

         prevfun (value) {
        //value拿到的当前的页码,不用传递，内置的函数，自动传递要前往的页码
        this.submit(value)
      },
      nextfun (value) {
        //value拿到页码
        this.submit(value)
      },
      currentchange (value) {
        this.submit(value)

      },
    },

  }
</script>

<style scoped>

</style>
